<template>
  <div class="page">
    <van-button @click="fn1">SET</van-button>
    <van-button @click="fn2">GET</van-button>

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model:loading="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="item in list" :key="item" :title="item" />

        <template #finished>
          <div>别拉了</div>
        </template>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import store2 from 'store2'

function fn1() {
  store2.session.set('user', { name: '张三' })
}

function fn2() {
  const value = store2.session.get('user')
  console.log('value', value)
}

const list = ref<number[]>([])
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)

const onLoad = () => {
  console.log('onLoad')
  // 异步更新数据
  // setTimeout 仅做示例，真实场景中一般为 ajax 请求
  setTimeout(() => {
    // 当下拉时，将数据先清空
    if (refreshing.value) {
      list.value = []
      refreshing.value = false
    }

    for (let i = 0; i < 10; i++) {
      list.value.push(list.value.length + 1)
    }

    // 加载状态结束
    loading.value = false

    // 数据全部加载完成
    if (list.value.length >= 40) {
      finished.value = true
    }
  }, 1000)
}

const onRefresh = () => {
  // 清空列表数据
  finished.value = false

  // 重新加载数据
  // 将 loading 设置为 true，表示处于加载状态
  loading.value = true
  onLoad()
}
</script>

<style lang="scss" scoped>
.page {
  height: 100%;
  background-color: green;
  overflow-y: auto;
}
</style>
